<template>
  <div style="padding: 20px;min-height: 87.5vh">
    <a-tabs
      v-model:activeKey="activeKey"
      @tabClick="handleClick"
    >
      <a-tab-pane :key="tabItem.key" v-for="(tabItem) in tabCards">
        <template #tab>
          <span>{{ tabItem.name }}</span>
        </template>
        <a-spin :spinning="loading">
          <a-table
            :columns="columns"
            :data-source="userCertificateList"
            :loading="loading"
            bordered
            :pagination="false"
            v-if="userCertificateList?.length > 0"
          >
            <template #bodyCell="{ record,column }">
              <template v-if="column.key === 'action'">
                <a-button type="primary" size="small"
                          @click="download(record)">
                  下载证书
                </a-button>
              </template>
            </template>
          </a-table>
          <EmptyData v-else />
        </a-spin>
        <div class="page-size">
          <Pagination :pageNo="pageInfo.pageNo" :pageSize="pageInfo.pageSize" :total="total"
                      @change-page="changePage" />
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script lang="ts" setup>
import { apiGetUserCertificateList } from "@/api/certificate";
import { onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { useMessage } from "@/hooks/web/useMessage";
import EmptyData from "@/components/public/EmptyData.vue";
import Pagination from "@/components/Pagination.vue";
import { downloadFile } from "@/api/common/api";

const router = useRouter();

const activeKey = ref("1");

const columns = [
  {
    title: "用户姓名",
    dataIndex: "userId_dictText",
    width: "20%"
  },
  {
    title: "证书名称",
    dataIndex: "certificateId_dictText",
    width: "15%"
  },
  {
    title: "证书类型",
    dataIndex: "certificateType_dictText",
    width: "15%"
  },
  {
    title: "考试名称",
    dataIndex: "examId_dictText",
    width: "15%"
  },
  {
    title: "课程名称",
    dataIndex: "courseId_dictText",
    width: "20%"
  },
  {
    title: "操作",
    dataIndex: "action",
    key: "action",
    width: "20%"
  }
];

const tabCards = [
  {
    key: "1",
    name: "全部",
    certificateType: ""
  },
  {
    key: "2",
    name: "学习证书",
    certificateType: "1"
  },
  {
    key: "3",
    name: "考试证书",
    certificateType: "2"
  }
];

const { createMessage } = useMessage();
const { createConfirm } = useMessage();

const userCertificateList = ref([]);
const pageInfo = reactive({ // 请求参数
  pageNo: 1,
  pageSize: 10,
  certificateType: ""
});

const total = ref<any>(0); // 数据总数
const loading = ref<boolean>(false); // 加载状态

function handleClick(tab) {
  pageInfo.pageNo = 1;
  const tabPane = tabCards.filter(item => item.key == tab)[0];
  if (tabPane) {
    pageInfo.certificateType = tabPane.certificateType;
  }
  listCertificate();
}

onMounted(() => {
  listCertificate();
});

async function listCertificate() {
  loading.value = true;
  try {
    userCertificateList.value = [];
    const res: any = await apiGetUserCertificateList(pageInfo);
    userCertificateList.value = res.result?.records;
    total.value = res.result?.total;
  } finally {
    loading.value = false;
  }
}

function changePage(pageNo) {
  pageInfo.pageNo = pageNo;
  listCertificate();
}

function download(certificate) {
  const fileName = certificate.certificatePath.substring(certificate.certificatePath.lastIndexOf("/") + 1);
  downloadFile(`/certificate/downloadCertificate?objectName=${certificate.certificatePath}&fileName=${fileName}`, fileName);
}
</script>

<style scoped lang="scss">

.page-size {
  margin: 15px 0px;
  text-align: right;
}

</style>
